<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="//unpkg.com/element-plus"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="cuit">
        <div style="margin-bottom: 10px;">
            <el-input v-model="categoryName" style="width: 240px; margin-right: 20px;" placeholder="职位类别"></el-input>
            <el-button type="success" @click="loadCategories">query</el-button>
            <el-button type="primary" @click="dialogVisible = true">Primary</el-button>
        </div>
        <el-table :data="jobCategories" style="width: 60%"
                  border stripe row-key="id" >
            <el-table-column prop="name" label="类别名称" width="180"></el-table-column>
            <el-table-column prop="snapshot" label="职位描述" width="180"></el-table-column>
            <el-table-column label="Operations">
                <template #default="scope">
                    <el-button v-if="scope.row.parentId == null" size="small" type="primary" @click="category.parentId = scope.row.id; dialogVisible = true">
                        Save
                    </el-button>
                    <el-button size="small" @click="handleEdit(scope.row.id)">
                        Edit
                    </el-button>
                    <el-button size="small" type="danger"
                            @click="handleDelete(scope.row.id)" >
                        Delete
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            v-model="dialogVisible"
            title="添加类别"
            width="500"
            :before-close="handleClose"
        >
            <el-form :model="category" label-width="auto" style="max-width: 600px" :rules="rules">

                <el-form-item label="类别名称" prop="name">
                    <el-input v-model="category.name" />
                </el-form-item>
                <el-form-item label="类别描述">
                    <el-input v-model="category.snapshot" type="textarea"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSave">添加类别</el-button>
                    <el-button @click="handleClose">Cancel</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog
                v-model="dialogVisible2"
                title="编辑类别"
                width="500"
                :before-close="handleClose"
        >
            <el-form :model="category" label-width="auto" style="max-width: 600px" :rules="rules">
                <el-select v-if="category.parentId != null" v-model="category.parentId" placeholder="选择父类别" style="width: 240px">
                    <el-option
                            v-for="item in parentCategories"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                    />
                </el-select>
                <br/>
                <el-form-item label="类别名称" prop="name">
                    <el-input v-model="category.name" />
                </el-form-item>
                <el-form-item label="类别描述">
                    <el-input v-model="category.snapshot" type="textarea"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="edit">编辑类别</el-button>
                    <el-button @click="handleClose">Cancel</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
    <script>
        const {createApp, ref} = Vue
        const {ElMessage, ElMessageBox} = ElementPlus
        const vm = createApp({
            data(){
                return {
                    pageIndex: 1,
                    pageSize: 100,
                    categoryName: '',
                    jobCategories: [],
                    dialogVisible: false,
                    category: {},
                    //表单数据校验规则
                    rules: {
                        name: { required: true, message: '类别名称不允许为空', trigger: 'blur' }
                    },
                    parentCategories: [],
                    dialogVisible2: false
                }
            },
            created(){
                console.log('页面创建完成后发送ajax请求加载类别分页信息')
                this.loadCategories()
                this.loadParentCategories()
            },

            methods: {
                async loadCategories(){
                    const {data: resp} = await axios.get(`http://localhost/admin/job-categories/list`,{
                        params: {
                           pageIndex: this.pageIndex,
                           pageSize: this.pageSize,
                           name: this.categoryName
                        },
                        withCredentials: true
                    })
                    if(resp.status === 'SUCCESS'){
                        this.jobCategories = resp.data.list
                    }
                },
                async handleSave(){
                    console.log('添加类别')
                    const {data: resp} = await axios.post(`http://localhost/admin/job-categories/save`,this.category,{
                        withCredentials: true
                    })
                    if(resp.status === 'SUCCESS'){
                        //提示同时刷新列表
                        ElMessage({
                            message: '类别添加成功',
                            type: 'success',
                        })
                        //关闭弹窗
                        this.handleClose()
                        this.loadCategories()
                        this.loadParentCategories()
                    } else {
                        //添加失败的错误提示
                        ElMessage.error(resp.message ? resp.message : "类别添加失败")
                    }
                },
                /**
                 * 关闭弹窗
                 */
                handleClose(){
                    this.category = {}
                    this.dialogVisible = false
                    this.dialogVisible2 = false
                },
                handleDelete(id){
                    ElMessageBox.confirm(
                        '确认删除?',
                        'Warning',
                        {
                            confirmButtonText: '确认',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    ).then(async () => { //点击确认按钮
                        const {data: resp} = await axios.delete(`http://localhost/admin/job-categories/remove?id=${id}`,{
                            withCredentials: true
                        })
                        if(resp.status === 'SUCCESS'){
                            //消息提示
                            ElMessage({
                                type: 'info',
                                message: '删除成功',
                            })
                            //刷新列表
                            this.loadCategories()
                            this.loadParentCategories()
                        }

                    }).catch(() => { //点击取消按钮
                        ElMessage({
                            type: 'info',
                            message: '取消删除',
                        })
                    })
                },

                async loadParentCategories(){
                    const {data: resp} = await axios.get(`http://localhost/admin/job-categories/parent/list`,{withCredentials: true})
                    if(resp.status === 'SUCCESS'){
                        this.parentCategories = resp.data
                    }
                },

                async handleEdit(id){
                    const {data: resp} = await axios.get(`http://localhost/admin/job-categories/find?id=${id}`,{withCredentials: true})
                    if(resp.status === 'SUCCESS'){
                        this.category = resp.data
                        this.dialogVisible2 = true
                    }
                },
                async edit(){
                    const {data: resp} = await axios.put(`http://localhost/admin/job-categories/edit`, this.category,{withCredentials: true})
                    if(resp.status === 'SUCCESS'){
                        ElMessage({
                            message: '类别添加成功',
                            type: 'success',
                        })
                        this.loadCategories()
                    }
                    this.handleClose()
                }
            }
        })
        vm.use(ElementPlus);
        vm.mount("#cuit")
    </script>
</body>
</html>